<template>
  <!--横屏倒计时组件+开播提醒按钮组件-->
  <!--目前只对接zxyh一家-->
  <div class="count-down-box" :class="{'zgrs':themeColor === 'zgrs'}">
    <div class="clock-time"></div>
    <div class="count-down-text">直播倒计时：</div>
    <div class="count-down-time">
      <div class="day"><span>{{timeNum.d}}</span>天</div>
      <div class="hours"><span>{{timeNum.h}}</span>小时</div>
      <div class="mnutes"><span>{{timeNum.m}}</span>分</div>
      <div class="Seconds"><span>{{timeNum.s}}</span>秒</div>
    </div>
    <LiveRemind v-if='isLiveRemind' ref="liveRemind" :liveRemind="liveRemind" :authorizePass='roomInfo.authorizePass'
      @formChildMsg='formChildData' />
  </div>
</template>

<script>
  import LiveRemind from '@/components/liveRemind/liveRemind'; //开播提醒按钮组件
  export default {
    props: {
      time: 'String', //倒计时
      roomInfo: Object,
      themeColor: {
        type: String,
        default: ''
      },
      liveRemind: String, //开播提醒状态
    },
    components: {
      LiveRemind, //开标提醒按钮组件
    },
    data() {
      return {
        timeNum: {
          'd': '--',
          'h': '--',
          'm': '--',
          's': '--',
        },
        isLiveRemind: false, //开播提醒按钮显示
        countDownInterval: '', //定时器
        timeDownNum: this.time,
        //timeDownNum:'2020-10-28 16:18:50',
      }
    },
    created() {
      this.getCountDownTime();
      if (this.$channel == 'zxyh' && window.terminal.isZxyhApp) { //中信银行app
        this.isLiveRemind = true;
      }
      if (this.$channel == 'gszq' && window.terminal.isGszqApp) { //国盛证券app
        let lefttime = this.getSeconds();
        if (lefttime < 300) { //5分钟
          this.isLiveRemind = false;
        } else {
          this.isLiveRemind = true;
        }

      }
    },
    mounted() {},
    destroyed() {
      clearInterval(this.countDownInterval); //销毁 清除定时器
    },
    methods: {
      formChildData(data) {
        //console.log(data)
        switch (data.type) {
          case 'liveRemind': //开播提醒
            if (window.terminal.isZxyhApp) { //zxyh 未登录 调起登录
              window.bank.userInfoPlugin.isLogin((res) => {
                //console.log('zxyh res.isLogin',res.isLogin)
                if (res.isLogin) { //  true 已经登录
                  this.$emit('formChildMsg', {
                    type: 'liveRemind',
                  })
                } else { //  false  未登录
                  fun.zxyhLogin(window.location.href) //调起登录
                }
              })
            } else {
              this.$emit('formChildMsg', {
                type: 'liveRemind',
              })
            }
            break;
          case 'gszqRemindYk': //gszq游客预约
            this.$emit('formChildMsg', {
              type: 'gszqRemindYk',
              data: '国盛证券预约未登录'
            })
            break;
          case 'gszqContinueRemind': //gszq 非游客 继续预约
            this.$emit('formChildMsg', {
              type: 'gszqContinueRemind',
              data: '国盛证券继续预约'
            })
            break;
          default:
            break;
        }
      },
      //倒计时执行
      getCountDownTime() {
        this.countDownInterval = setInterval(this.getTime, 1000);
      },
      getTime() {
        let lefttime = this.getSeconds(); //倒计时秒数
        if (this.$channel == 'gszq') {
          if (lefttime < 300) { //五分钟
            this.isLiveRemind = false
          }
        }
        if (lefttime < 1) { //开播
          clearInterval(this.countDownInterval); //清除定时器
          this.$emit('formChildMsg', {
            type: 'startToLive',
            data: 'ruan'
          })
          return;
        }
        if (parseInt(lefttime / 3600 / 24) < 10) {
          this.timeNum.d = '0' + parseInt(lefttime / 3600 / 24);
        } else {
          this.timeNum.d = parseInt(lefttime / 3600 / 24);
        }
        if (parseInt(lefttime / (60 * 60)) % 24 < 10) {
          this.timeNum.h = '0' + parseInt(lefttime / (60 * 60)) % 24;
        } else {
          this.timeNum.h = parseInt(lefttime / (60 * 60)) % 24;
        }
        if (parseInt(lefttime / (60)) % 60 < 10) {
          this.timeNum.m = '0' + parseInt(lefttime / (60)) % 60;
        } else {
          this.timeNum.m = parseInt(lefttime / (60)) % 60;
        }
        if (parseInt(lefttime % 60) < 10) {
          this.timeNum.s = '0' + parseInt(lefttime % 60);
        } else {
          this.timeNum.s = parseInt(lefttime % 60);
        }
        //console.log(JSON.stringify(this.timeNum))
      },
      // 倒计时 秒数
      getSeconds() {
        let iosTime = this.timeDownNum.replace(/-/g,
          "/") //ios  2018-11-21 12:01:22  算出来的时间戳不兼容  转换成   2018/11/21 12:01:22
        let endtime = new Date(iosTime); //结束时间
        let nowtime = new Date(); //当前时间
        return parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
      },
      // 继续预约
      liveRemindChild(){
        this.$refs.liveRemind.postRemindData('1')
        console.log('继续预约-order')
      }

    },
  }
</script>

<style scoped="scoped">
  /*倒计时*/

  .count-down-box {
    width: 100vw;
    height: 85px;
    position: absolute;
    top: 340px;
    left: 0px;
    z-index: 1004;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .zgrs .count-down-text {
    color: #6EE5CF;
  }

  .zgrs .count-down-time {
    color: #6EE5CF;
  }

  .zgrs.count-down-box .clock-time {
    width: 80px;
    height: 80px;
    background: url(../../../../assets/images/msyh/zgrs-clock-pic.png) no-repeat center center;
    background-size: 37px 40px;
    margin-left: 25px;
  }

  .count-down-box .clock-time {
    width: 50px;
    height: 85px;
    background: url(../../../../assets/images/clockTime.png) no-repeat center center;
    background-size: 50px 48px;
    margin-left: 34px;
  }

  .count-down-text {
    /*width: 160px;*/
    height: 85px;
    text-align: left;
    line-height: 85px;
    color: white;
    font-size: 28px;
    box-sizing: content-box;
    font-weight: bold;
    padding-left: 14px;
  }

  .count-down-time {
    width: 320px;
    height: 85px;
    line-height: 85px;
    color: white;
    margin: 0px 0 0 0;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    display: flex;
    /*background: pink;*/
  }
</style>
